<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">

  <title>Insert title here</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./static/css/style.css">

  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    body {
      background-color: white;

    }

    #app {
      background-color: white;

    }

    .form {
      width: 500px;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-form v-if="userbase" ref="form" :model="form" class="form" label-width="90px">

      <el-form-item label="语言:">
        Java、Jsp、Javascript、Html
      </el-form-item>
      <el-form-item label="框架：">
        Spring、Spring Boot、Mybatis、Mysql、Tomcat、Vue、Element UI
      </el-form-item>
      <el-form-item label="作者：">
        张新
      </el-form-item>
      <el-form-item label="最后更新：">
        2020-3-29 22:20:10
      </el-form-item>
      <el-form-item label="客户端OS：">
        {{getOS()}}
      </el-form-item>
      <el-form-item label="当前时间：">
        {{getDate()}}
      </el-form-item>
      <el-form-item label="系统公告：">
        <el-input v-model="sysinfo.info"></el-input> <el-button v-if="userbase.groupid == 5" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

  <script type="text/javascript" src="lib/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
        userbase: undefined,
        form: {
          region: "",
          name: "",
          type: ""
        },
        sysinfo: {}
      },
      mounted() {
        this.getuserbase();
        this.getSys();
      },
      methods: {
        getSys() {
          axios.post("/getinfo", {}).then(res => {
            if (res.data.result == "1001")
            console.log(res.data.data);
            this.sysinfo = res.data.data;
          })
        },
        save() {
          axios.post("/setinfo", { info: this.sysinfo.info }).then(res => {
            if (res.data.result == "1001") {
              this.$notify.success({
                title: '成功',
                message: '成功'
              })
            } else {
              this.$notify.error({
                title: '失败',
                message: '失败'
              })
            }
          })
        },
        getDate() {
          Date.prototype.Format = function (fmt) { // author: meizz
            var o = {
              "M+": this.getMonth() + 1, // 月份
              "d+": this.getDate(), // 日
              "h+": this.getHours(), // 小时
              "m+": this.getMinutes(), // 分
              "s+": this.getSeconds(), // 秒
              "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
              "S": this.getMilliseconds() // 毫秒
            };
            if (/(y+)/.test(fmt))
              fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
              if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
          }
          return new Date().Format("yyyy-MM-dd hh:mm:ss");
        },
        getOS() {
          var sUserAgent = navigator.userAgent;
          var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
          var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
          if (isMac) return "Mac";
          var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
          if (isUnix) return "Unix";
          var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
          if (isLinux) return "Linux";
          if (isWin) {
            var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
            if (isWin2K) return "Win2000";
            var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
            if (isWinXP) return "WinXP";
            var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
            if (isWin2003) return "Win2003";
            var isWinVista = sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
            if (isWinVista) return "WinVista";
            var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
            if (isWin7) return "Win7";
            var isWin10 = sUserAgent.indexOf("Windows NT 10") > -1 || sUserAgent.indexOf("Windows 10") > -1;
            if (isWin10) return "Win10";
          }
          return "other";
        },
        beforeAvatarUpload() {

        },
        handleAvatarSuccess() {

        },
        getuserbase() {
          var parm = localStorage.getItem("userbase");
          if (parm != null) {
            this.userbase = JSON.parse(parm);
          }
        },
        logout() {
          axios.post("/logout").then(res => {
            console.log(res);
            console.log(this.loginform);
          })
        },
        resetpass() {
          console.log("resetpass");
        },

      }
    });
  </script>
</body>

</html>